<template>
  <div class="profileDetail">
    <Header leftArrow title="我的资料"/>
    <div class="profile-outer">
      <div class="profile-container">
        <div class="uploader">
          <Uploader/>
        </div>
        <van-field
          v-model="userInfo.userName"
          type="text"
          label="账号"
          input-align="right"
          is-link
          readonly
        />
        <van-field
          v-model="userInfo.userPhone"
          type="tel"
          label="手机号"
          input-align="right"
          is-link
          readonly
          @click="showDialog('userPhone')"
        />
        <van-field v-model="userInfo.updateTime" readonly type="tel" label="注册日期" input-align="right" is-link/>
        <van-field
          v-model="userInfo.realName"
          readonly
          placeholder="未设置"
          type="text"
          label="昵称"
          input-align="right"
          is-link
          @click="showDialog('realName')"
        />
        <van-field
          v-model="userInfo.userEmail"
          readonly
          placeholder="未设置"
          type="text"
          label="邮箱"
          input-align="right"
          is-link
          @click="showDialog('userEmail')"/>
        <!--dialog弹框-->
        <van-dialog
          v-model="isShowDialog"
          title="修改"
          show-cancel-button
          @cancel="handleCancel"
          @confirm="handleConfirm"
          @click="showDialog">
          <div class="container">
            <van-field
              v-show="condition === 'userPhone'"
              v-model.trim="temp.userPhone"
              :error-message="phoneErrorMessage"
              required
              label="手机号"
              placeholder="请输入手机号"
            />

            <van-field
              v-show="condition === 'realName'"
              v-model.trim="temp.realName"
              :error-message="realNameErrorMessage"
              required
              label="昵称"
              placeholder="请输入昵称"
            />

            <van-field
              v-show="condition === 'userEmail'"
              v-model.trim="temp.userEmail"
              :error-message="userEmailErrorMessage"
              required
              label="邮箱"
              placeholder="请输入邮箱"
            />
          </div>
        </van-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { Toast } from 'vant'
import Header from '@/components/Header/NoLeftArrowHeader'
import Uploader from '@/components/Uploader/Uploader'

import { phoneReg, emailReg } from '@/utils/validation_rule'
import { updateUserInfo } from '@/api/user'

export default {
  name: 'ProfileDetail',
  components: {
    Header,
    Uploader
  },
  data() {
    return {
      userInfo: {},
      genderShowPicker: false,
      genderColumns: ['男', '女'],
      isShowDialog: false,
      temp: {},
      condition: ''
    }
  },
  computed: {
    ...mapState({
      userData: state => state.user.userInfo
    }),

    phoneErrorMessage() {
      if (phoneReg(this.temp.userPhone)) {
        return ''
      } else {
        return '手机号格式错误'
      }
    },

    realNameErrorMessage() {
      if (this.temp.realName) {
        return ''
      } else {
        return '昵称不能为空'
      }
    },

    userEmailErrorMessage() {
      if (emailReg(this.temp.userEmail)) {
        return ''
      } else {
        return '邮箱格式不正确'
      }
    }
  },
  created() {
    this.userInfo = Object.assign({}, this.userData)
    this.userInfo.updateTime = this.userInfo.updateTime.split(' ')[0]
  },
  mounted() {
  },
  methods: {
    ...mapActions('user', ['setUserInfo']),

    handleCancel() {
      this.temp = {}
    },

    async handleConfirm() {
      const { id } = this.userInfo
      const { userPhone, realName, userEmail } = this.temp
      const { code, data, msg } = await updateUserInfo({ id, userPhone, realName, userEmail })

      if (code === 0) {
        this.setUserInfo(data)
        this.userInfo = Object.assign({}, data)
        this.userInfo.updateTime = this.userInfo.updateTime.split(' ')[0]
        this.temp = {}
      } else {
        this.temp = {}
        Toast({
          message: msg,
          position: 'bottom'
        })
      }
    },

    showDialog(condition) {
      this.condition = condition
      this.temp = Object.assign({}, this.userInfo)
      this.isShowDialog = true
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.profileDetail {
  height: 100%;

  .profile-outer {
    position: fixed;
    top: 46px;
    bottom: 0;
    width: 100%;
    overflow: auto;

    .profile-container {
      height: 100%;

      .uploader {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        box-sizing: border-box;
      }

      .van-dialog {
        .container {
          padding: 0 20px;
        }
      }

      /deep/ .van-icon {
        line-height: 24px;
      }
    }
  }

}
</style>
